<template>
  <div align="center">
    <h1>进出账表</h1>
    <table border="1" cellspacing="0">
      <tr>
        <td>公司名称</td>
        <td>供货时间</td>
        <td>供货金额</td>
        <td>供货数量</td>
        <td>货品名称</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data">
        <td>{{ i.company_name }}</td>
        <td>{{ i.date }}</td>
        <td>{{ i.price }}</td>
        <td>{{ i.num }}</td>
        <td>{{ i.product_name }}</td>
        <td>
          <button @click="del(i.id)">删除</button>
          <button @click="amend(i.id)">修改</button>
        </td>
      </tr>
    </table>

    <br><br><br><br>

    <form action="" @submit.prevent="add" v-model="form">
      <p>公司名称: <input type="text" v-model="form.company_name"></p>
      <p>供货时间: <input type="date" v-model="form.date"></p>
      <p>供货金额: <input type="text" v-model="form.price"></p>
      <p>供货数量: <input type="number" v-model="form.num"></p>
      <p>货品名称: <input type="text" v-model="form.product_name"></p>
      <button type="submit">添加</button>
    </form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      form: {}
    }
  },
  methods: {
    btn() {
      this.axios.get('billM/')
        .then(res => {
          this.data = res.data
        })
    },
    add() {
      this.axios.post('billM/', this.form)
        .then(res => {
          alert('添加成功')
          this.form = {}
          this.btn()
        })
    },
    del(id) {
      this.axios.delete('billM/?id=' + id)
        .then(res => {
          alert('删除成功')
          this.btn()
        })
    },
    amend(id) {
      this.$router.push({'path': '/shouBill', query: {id: id}})
    }
  },
  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>
